import { Button, DatePicker, Input, NavBar, Toast } from 'antd-mobile'
import Icon from '@/components/Icon'
import './index.scss'
import classNames from 'classnames'
import { billListData } from '@/constants'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { addBillList } from '@/store/modules/billStore'
import { useDispatch } from 'react-redux'
import dayjs from 'dayjs'

const New = () => {
  const navigate = useNavigate()
  const [type, setType] = useState('pay')
  const [money, setMoney] = useState()
  const [useFor, setUseFor] = useState()
  const dispatch = useDispatch()
  const [showDatePicker, setShowDatePicker] = useState(false)
  const [date, setDate] = useState(new Date())
  // Input受控
  const changeInput = (value) => {
    setMoney(value)
  }
  // 表单
  const data = {
    type,
    money: type === 'pay' ? -money : +money,
    date,
    useFor
  }
  // 点击保存表单数据
  const save = () => {
    if (!data.money || !data.useFor)
      return Toast.show({
        content: '信息不完整！'
      })
    dispatch(addBillList(data))
    navigate('/')
  }
  // 确定时间选择
  const handleConfirm = (value) => {
    console.log(value)
    setDate(value)
    setShowDatePicker(false)
  }
  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(type === 'pay' ? 'selected' : '')}
            onClick={() => setType('pay')}
          >
            支出
          </Button>
          <Button
            className={classNames(type === 'income' ? 'selected' : '')}
            shape="rounded"
            onClick={() => setType('income')}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date">
              <Icon type="calendar" className="icon" />
              <span
                className="text"
                onClick={() => {
                  setShowDatePicker(true)
                }}
              >
                {dayjs(date).format('YYYY-MM-DD') === dayjs(new Date()).format('YYYY-MM-DD')
                  ? '今天'
                  : dayjs(date).format('YYYY-MM-DD')}
              </span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
                visible={showDatePicker}
                onConfirm={handleConfirm}
              />
            </div>
            <div className="kaInput">
              <Input className="input" placeholder="0.00" type="number" value={money} onChange={changeInput} />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {billListData[type].map((item) => {
          return (
            <div className="kaType" key={item.type}>
              <div className="title">{item.name}</div>
              <div className="list">
                {item.list.map((item) => {
                  return (
                    <div
                      className={classNames('item', useFor === item.type ? 'selected' : '')}
                      key={item.type}
                      onClick={() => setUseFor(item.type)}
                    >
                      <div className="icon">
                        <Icon type={item.type} />
                      </div>
                      <div className="text">{item.name}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

      <div className="btns">
        <Button className="btn save" onClick={save}>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New
